import {
  Button,
  Switch,
  Table,
  Modal,
  message,
  Form,
  Descriptions,
  Tooltip,
  Popover,
  DatePicker,
  Input,
  Space,
} from 'antd';
import { FormInstance } from 'antd/es/form/Form';
import { ColumnsType } from 'antd/lib/table';
import { checkPermission } from 'permission/Index';
import React, { CSSProperties } from 'react';
import { GetUserInfoParams, UserInfo } from '../../../schema/User';
import {
  delayUser,
  delUser,
  enableUser,
  getDataPermissionUserRules,
  getUserList,
  mulDelUser,
  resetPwdRequest,
  relieveUserStatus,
} from '../../../servers/servers';
import {
  clearNull,
  deleteRowChangePageNum,
  getTableIndex,
  showWebSenstive,
  webSenstiveMask,
} from '../../../../utils/tools';
import { UserOperation } from './component/UserOperation';
import ResetPassword from 'admin/components/ResetPassword';
import { GetDataPermissionUserRules } from 'admin/schema/DataPermission';
import { DownOutlined, MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import moment, { Moment } from 'moment';
import { EditPhoneModal } from './component/EditPhoneModal';

export const IAccountTypeEnum = {
  1: '系统管理（自有人员）',
  2: '其他账号（自有人员）',
  3: '四方人员账号',
  4: '其他账号',
};

interface UserState {
  tableData: UserInfo[];
  dataPermissionTableData: GetDataPermissionUserRules[];
  resetPwdVisible: boolean;
  checkDetailVisible: boolean;
  editPhoneVisible: boolean;
  currentRecord: UserInfo;
  userName: string;
  mobile: string;
  pageInfo: {
    pageNum: number;
    pageSize: number;
    pageTotal: number;
  };
  tableLoading: boolean;
  dataPermissionTableVisible: boolean;
  dataPermissionTableStyle: CSSProperties;
  plusCircleOutlinedClassName: string;
  showMore?: number;
  delayUserVisible: boolean;
}

export default class User extends React.Component<{}, UserState> {
  // table 列
  columns: ColumnsType<UserInfo>;

  //用户详情 数据权限 table 列
  datePermissionRuleColumn: ColumnsType<GetDataPermissionUserRules>;

  // 表单引用
  delayFormRef: React.RefObject<FormInstance>;
  // 用户操作控件引用
  userOperationRef: React.RefObject<UserOperation>;

  resetPwdForm: React.RefObject<FormInstance>;

  // 已选id
  selectedIds: number[];
  // 操作权限数组
  operationsArr: any[];

  constructor(props: {}) {
    super(props);
    this.delayFormRef = React.createRef<FormInstance>();
    this.userOperationRef = React.createRef();
    this.resetPwdForm = React.createRef();
    this.selectedIds = [];
    this.operationsArr = [];

    this.state = {
      tableData: [],
      dataPermissionTableData: [],
      resetPwdVisible: false,
      checkDetailVisible: false,
      editPhoneVisible: false,
      userName: '',
      mobile: '',
      currentRecord: {} as UserInfo,
      pageInfo: {
        pageTotal: 0,
        pageNum: 1,
        pageSize: 10,
      },
      tableLoading: false,
      dataPermissionTableVisible: false,
      dataPermissionTableStyle: { display: 'none' },
      plusCircleOutlinedClassName: 'form-list-btn-icon',
      showMore: undefined,
      delayUserVisible: false,
    };

    this.columns = [
      {
        title: '序号',
        width: 80,
        dataIndex: 'index',
        key: 'index',
        render: (text, record, index) =>
          getTableIndex(index, this.state.pageInfo.pageSize, this.state.pageInfo.pageNum),
      },
      {
        title: '账号',
        dataIndex: 'userName',
        key: 'userName',
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
      },
      {
        title: '企业名称',
        dataIndex: 'companyName',
        key: 'companyName',
      },
      {
        title: '组织机构名称',
        dataIndex: 'organizationName',
        key: 'organizationName',
      },
      {
        title: '角色',
        dataIndex: 'roles',
        key: 'roles',
        render(arr) {
          if (!arr || !arr.length) return '';
          return arr
            .map((item: any) => {
              return item.roleName;
            })
            .join(',');
        },
      },
      // {
      //   title: '状态',
      //   dataIndex: 'userStatus',
      //   key: 'userStatus',
      //   render: (text, record, index) => {
      //     return (
      //       <>
      //         <Switch
      //           disabled={!checkPermission('/account/user/status')}
      //           checked={record.userStatus === 0}
      //           onChange={enable => {
      //             this.setUserEnable(enable, record);
      //           }}
      //         />
      //       </>
      //     );
      //   },
      // },
      {
        title: '用户状态',
        dataIndex: 'userStatus',
        key: 'userStatus',
        render: (text, record: any, index) => {
          // 0：正常 1：冻结 2：注销
          let res = '';

          if (record.lockMark === 1) {
            res = '冻结';
          } else {
            switch (record.userStatus) {
              case 0:
                res = '正常';
                break;
              case 1:
                res = '冻结';
                break;
              case 2:
                res = '注销';
                break;
              default:
                break;
            }
          }

          return res;
        },
      },
      {
        title: '有效期',
        dataIndex: 'userValidityDate',
        key: 'userValidityDate',
        render: (text, record, index) => {
          return moment(text).format('YYYY-MM-DD');
        },
      },
      {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        width: 180,
        render: this.renderOperations,
      },
    ];

    /**
     * Table列描述数据对象
     */
    const renderScriptContent = (text: any, record: any, index: number) => {
      let showContent = '';
      if (!text || !text.length) {
        showContent = '';
      } else {
        showContent = text
          .map((item: any) => {
            return item;
          })
          .join(',');
      }
      const scripts: Array<string> = record.resourceNames || '';
      return (
        <Tooltip
          placement="topLeft"
          title={
            <>
              {scripts.length > 0 &&
                scripts.map((item, num) => {
                  return (
                    <div key={num}>
                      <div>数据表：{item}</div>
                    </div>
                  );
                })}
              {!scripts && <div key={index}>数据表：{text}</div>}
            </>
          }
        >
          {showContent}
        </Tooltip>
      );
    };

    this.datePermissionRuleColumn = [
      {
        title: '序号',
        width: 80,
        dataIndex: 'index',
        key: 'index',
        render: (text, record, index) =>
          getTableIndex(index, this.state.pageInfo.pageSize, this.state.pageInfo.pageNum),
      },
      {
        title: '规则名称',
        dataIndex: 'ruleName',
        key: 'ruleName',
      },
      {
        title: '数据源表',
        dataIndex: 'resourceNames',
        key: 'resourceNames',
        ellipsis: {
          showTitle: false,
        },
        render: renderScriptContent,
      },
      {
        title: '授权规则',
        dataIndex: 'ruleContent',
        key: 'ruleContent',
      },
    ];
    this.handleResetPwdRequest = this.handleResetPwdRequest.bind(this);
    this.closeResetModal = this.closeResetModal.bind(this);
  }

  componentDidMount() {
    this.getTableOperations();
    this.fetchList();
  }

  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };
  /**操作权限数量，是否显示更多 */
  getTableOperations() {
    const arr = [
      '/account/user/editPhone',
      '/account/user/resetPwd',
      '/account/user/modify',
      '/account/user/delay',
      '/account/user/delete',
    ];
    const newArr = arr.filter((value: any, index, array) => checkPermission(value) === true);
    console.log('用户列表>>>操作权限********', newArr);
    this.operationsArr = newArr;
  }

  /**渲染操作列 */
  renderOperations = (text: any, record: UserInfo, index: number) => {
    return (
      <div>
        <Button
          type="link"
          onClick={() => {
            this.checkDetail(record);
          }}
        >
          详情
        </Button>
        {/* 备注：4项操作权限，只有1项时，不展示【更多】 */}
        {this.operationsArr.length === 1 && this.operationsArr[0] === '/account/user/editPhone' && (
          <Button
            type="link"
            onClick={() => {
              this.showPhoneModal(record);
            }}
          >
            修改手机号
          </Button>
        )}
        {this.operationsArr.length === 1 && this.operationsArr[0] === '/account/user/resetPwd' && (
          <Button
            type="link"
            onClick={() => {
              this.showResetModal(record);
            }}
          >
            重置密码
          </Button>
        )}
        {this.operationsArr.length === 1 && this.operationsArr[0] === '/account/user/modify' && (
          <Button
            type="link"
            onClick={() => {
              this.modify(record);
            }}
          >
            编辑
          </Button>
        )}
        {this.operationsArr.length === 1 && this.operationsArr[0] === '/account/user/delay' && (
          <Button
            type="link"
            onClick={() => {
              this.delay(record);
            }}
          >
            续期
          </Button>
        )}
        {this.operationsArr.length === 1 && this.operationsArr[0] === '/account/user/delete' && (
          <Button
            type="link"
            onClick={() => {
              this.deleteRecord(record);
            }}
          >
            删除
          </Button>
        )}
        {this.operationsArr.length > 1 && (
          <Popover
            placement="bottom"
            trigger="click"
            arrowPointAtCenter
            getPopupContainer={(): any => document.getElementById('userBox')}
            visible={this.state.showMore === record.userId}
            onVisibleChange={(visible: boolean) => {
              console.log('点击更多', index, visible);
              const val = visible ? record.userId : undefined;
              this.setState({
                showMore: val,
              });
            }}
            content={
              <div
                className="more-btn-content"
                onClick={() => {
                  this.setState({
                    showMore: undefined,
                  });
                }}
              >
                {checkPermission('/account/user/editPhone') && (
                  <Button
                    type="link"
                    onClick={() => {
                      this.showPhoneModal(record);
                    }}
                  >
                    修改手机号
                  </Button>
                )}
                {checkPermission('/account/user/resetPwd') && (
                  <Button
                    type="link"
                    onClick={() => {
                      this.showResetModal(record);
                    }}
                  >
                    重置密码
                  </Button>
                )}
                {checkPermission('/account/user/modify') && (
                  <Button
                    type="link"
                    onClick={() => {
                      this.modify(record);
                    }}
                  >
                    编辑
                  </Button>
                )}
                {checkPermission('/account/user/delay') && (
                  <Button
                    type="link"
                    onClick={() => {
                      this.delay(record);
                    }}
                  >
                    续期
                  </Button>
                )}
                {checkPermission('/account/user/status') && (
                  <Button
                    type="link"
                    onClick={() => {
                      this.relieve(record);
                    }}
                  >
                    解除
                  </Button>
                )}
                {checkPermission('/account/user/delete') && (
                  <Button
                    type="link"
                    onClick={() => {
                      this.deleteRecord(record);
                    }}
                  >
                    删除
                  </Button>
                )}
              </div>
            }
          >
            <Button type="link">
              更多
              <DownOutlined />
            </Button>
          </Popover>
        )}
      </div>
    );
  };
  onChangeDate = (date: Moment | null) => {
    console.log(date, '改变有效期');
  };
  /**续期弹窗-关闭 */
  handleCloseDelayModel = () => {
    this.setState({
      delayUserVisible: false,
    });
  };
  /**续期弹窗-提交 */
  handleSubmitDelayModel = () => {
    const form = this.delayFormRef.current;
    form?.validateFields().then(async res => {
      const val = form.getFieldsValue();
      const date = val.expireTime.format('YYYY-MM-DD');
      const { userId } = this.state.currentRecord;
      console.log(userId, '有效期：', date, val.expireTime);

      try {
        // 请求有效期接口
        await delayUser(userId, {
          date,
        });
        message.success('续期成功');
        this.fetchList();
        this.setState({
          delayUserVisible: false,
        });
      } catch (error) {
        console.error(`系统异常: ${JSON.stringify(error)}`);
      }
    });
  };

  /**
   * 查看用户详情交互
   */
  private checkDetail(record: UserInfo): void {
    this.setState({
      checkDetailVisible: true,
      currentRecord: record,
      dataPermissionTableVisible: false,
      dataPermissionTableStyle: { display: 'none' },
    });
    getDataPermissionUserRules(record.userId)
      .then(res => {
        this.setState({
          dataPermissionTableData: res.data,
        });
      })
      .catch(error => {
        console.error(`系统异常: ${JSON.stringify(error)}`);
      });
  }

  /**
   * 编辑用户交互
   */
  private modify(record: UserInfo): void {
    this.userOperationRef.current?.open('modify', record);
  }

  /**
   * 账号有效期延期交互
   */
  private delay(record: UserInfo): void {
    this.setState({
      delayUserVisible: true,
      currentRecord: record,
    });
  }
  /**
   * 解除账号异常状态，恢复正常
   * @param record
   */
  private relieve(record: UserInfo): void {
    Modal.confirm({
      content: '确认解除账号异常状态吗',
      onOk: () => {
        this.setState({
          tableLoading: true,
        });
        relieveUserStatus(record.userId)
          .then(res => {
            message.success('成功');
            this.fetchList();
          })
          .catch(error => {
            console.error(`系统异常: ${JSON.stringify(error)}`);
          })
          .finally(() => {
            this.setState({
              tableLoading: false,
            });
          });
      },
    });
  }
  /**
   * 显示修改手机号弹窗
   * @param record
   */
  private showPhoneModal(record: UserInfo): void {
    this.setState({
      editPhoneVisible: true,
      currentRecord: record,
    });
  }

  /**
   * 显示重置密码弹窗
   * @param record
   */
  private showResetModal(record: UserInfo): void {
    this.setState({
      resetPwdVisible: true,
      currentRecord: record,
    });
  }

  /**
   * 发送重置密码请求
   */
  private async handleResetPwdRequest(newPassword: string) {
    const { userId, userName } = this.state.currentRecord;
    try {
      await resetPwdRequest({
        userId: userId,
        userName: userName,
        passWord: newPassword,
      });
      message.success('密码重置成功');
      this.closeResetModal();
    } catch (error) {
      console.error(`系统异常: ${JSON.stringify(error)}`);
    }
  }
  /**
   * 关闭重置密码弹窗
   */
  closeResetModal() {
    this.setState({
      resetPwdVisible: false,
      currentRecord: {} as UserInfo,
    });
  }
  /**
   * 删除表格行数据后，当前页刷新
   * @param size 条数
   */
  private freshTableDelRow(size: number) {
    const { pageTotal, pageNum, pageSize } = this.state.pageInfo;
    const newPageNum = deleteRowChangePageNum(size, pageTotal, pageNum, pageSize);
    this.setState(
      {
        pageInfo: {
          pageTotal,
          pageSize,
          pageNum: newPageNum,
        },
      },
      () => {
        this.fetchList();
      }
    );
  }

  /**
   * 删除用户
   */
  private deleteRecord(record: UserInfo): void {
    Modal.confirm({
      content: '删除后无法恢复，确认删除吗',
      onOk: () => {
        delUser(record.userId as number)
          .then(res => {
            message.success('删除成功');
            this.freshTableDelRow(1);
          })
          .catch(error => {
            console.error(`系统异常: ${JSON.stringify(error)}`);
          });
      },
    });
  }

  /**
   * 批量删除
   */
  private batchDelete(): void {
    if (this.selectedIds.length === 0) {
      message.warn('请先选择项');
      return;
    }
    Modal.confirm({
      content: '删除后无法恢复，确认删除吗',
      onOk: () => {
        mulDelUser(this.selectedIds)
          .then(res => {
            message.success('删除成功');
            this.freshTableDelRow(this.selectedIds.length);
          })
          .catch(error => {
            console.error(`系统异常: ${JSON.stringify(error)}`);
          });
      },
    });
  }

  /**
   * 停用/启用 用户
   */
  private setUserEnable(enable: boolean, record: UserInfo): void {
    if (!enable) {
      Modal.confirm({
        content: '确定停用账号吗，停用后此账户将无法登录系统',
        onOk: () => {
          enableUser(record.userId as number, {
            userStatus: 1,
          })
            .then(res => {
              message.success('停用成功');
              this.fetchList();
            })
            .catch(error => {
              console.error(`系统异常: ${JSON.stringify(error)}`);
            });
        },
      });
    } else {
      enableUser(record.userId as number, {
        userStatus: 0,
      })
        .then(res => {
          message.success('启用成功');
          this.fetchList();
        })
        .catch(error => {
          console.error(`系统异常: ${JSON.stringify(error)}`);
        });
    }
  }

  /**
   * 查询当前列表
   */
  private async fetchList() {
    this.setState({
      tableLoading: true,
    });
    const { pageInfo, userName, mobile } = this.state;
    try {
      const params: GetUserInfoParams = {
        userName,
        phoneNumber: mobile,
        pageNo: pageInfo.pageNum,
        pageSize: pageInfo.pageSize,
      };
      const { count, data } = await getUserList(clearNull(params));
      pageInfo.pageTotal = count || 0;
      const webSenstive = await showWebSenstive();
      console.log('展示敏感信息***', webSenstive);
      // 根据页面敏感配置，修改手机号和身份证号码
      const newData: any = [];
      data.map((value: any, index, array) => {
        newData.push(webSenstiveMask(value, webSenstive));
      });
      this.setState({
        tableData: newData,
        pageInfo: pageInfo,
      });
    } catch (error) {
      console.error(`系统异常: ${JSON.stringify(error)}`);
    }
    this.setState({
      tableLoading: false,
    });
  }

  /**
   * 翻页方法
   * @param pageNum 当前页码
   * @param pageSize 页面展示数据条数
   */
  private jumpPage(pageNum: number, pageSize?: number): void {
    const newProp = this.state.pageInfo;
    newProp.pageNum = pageNum;
    if (pageSize) {
      newProp.pageSize = pageSize;
    }
    this.setState(
      {
        pageInfo: newProp,
      },
      () => {
        this.fetchList();
      }
    );
  }

  private getRoleNames(arr: any): string {
    if (!arr || !arr.length) return '--';
    return arr
      .map((item: any) => {
        return item.roleName;
      })
      .join(',');
  }

  /**
   * 表格行操作后，重置列表
   */
  resetList = () => {
    this.jumpPage(1);
  };

  /**
   * 重置搜索列表
   */
  resetSearch = () => {
    this.setState({
      userName: '',
      mobile: '',
    });
    this.jumpPage(1);
  };

  // 账号类型
  accountTypeRender = (accountType: number) => {
    switch (accountType) {
      case 1:
        return IAccountTypeEnum[1];
      case 2:
        return IAccountTypeEnum[2];
      case 3:
        return IAccountTypeEnum[3];
      case 4:
        return IAccountTypeEnum[4];
      default:
        return '-';
    }
  };

  // 自动续期初始值
  delayTimeInit = (accountType: number, expireTime: string) => {
    let res: moment.Moment = undefined;
    /**
      账号类型（续期显示）
      系统管理（自有人员） 3个月  （不算当天）
      其他账号（自有人员） 12个月 （不算当天）
      四方账号             1个月  （不算当天）
      其他账号             6个    （不算当天）
     */

    switch (accountType) {
      case 1:
        res = moment(expireTime).add(3, 'month');
        break;
      case 2:
        res = moment(expireTime).add(1, 'years');
        break;
      case 3:
        res = moment(expireTime).add(1, 'month');
        break;
      case 4:
        res = moment(expireTime).add(6, 'month');
        break;
      default:
        res = moment(expireTime).add(6, 'month');
        break;
    }
    return res;
  };

  render() {
    const {
      userName,
      mobile,
      tableData,
      dataPermissionTableData,
      tableLoading,
      pageInfo: { pageNum, pageSize, pageTotal },
      resetPwdVisible,
      checkDetailVisible,
      editPhoneVisible,
      currentRecord,
      dataPermissionTableVisible,
      dataPermissionTableStyle,
      delayUserVisible,
    } = this.state;
    const {
      columns,
      datePermissionRuleColumn,
      userOperationRef,
      delayFormRef,
      onChangeDate,
      handleCloseDelayModel,
      handleSubmitDelayModel,
    } = this;
    const rowSelection = {
      onChange: (selectedRowKeys: any, selectedRows: any) => {
        this.selectedIds = [];
        selectedRows.forEach((item: any) => {
          this.selectedIds.push(item.userId);
        });
      },
    };
    const formLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 12 },
    };
    const disabledDate = (current: any) => {
      // 不可选择：今天和以前日期
      return current && current < moment();
    };

    return (
      <div id="userBox" className="user-mgr page-more-btns">
        <div className="mgr-header">
          <div className="mgr-header-left">
            <Form layout="inline">
              <Form.Item label="账号">
                <Input
                  allowClear
                  placeholder="请输入"
                  style={{ width: 200 }}
                  value={userName}
                  onChange={e => {
                    this.setState({
                      userName: e.target.value,
                    });
                  }}
                />
              </Form.Item>
              <Form.Item label="手机号">
                <Input
                  allowClear
                  placeholder="请输入"
                  style={{ width: 200 }}
                  value={mobile}
                  onChange={e => {
                    const val = e.target.value;
                    console.log(val);
                    this.setState({
                      mobile: val.replace(/[^0-9]+/g, ''),
                    });
                  }}
                />
              </Form.Item>
              <Space size="middle">
                <Button type="primary" onClick={this.resetList}>
                  搜索
                </Button>
                <Button type="primary" ghost onClick={this.resetSearch}>
                  重置
                </Button>
              </Space>
            </Form>
          </div>
          <div className="mgr-header-right">
            {checkPermission('/account/user/add') && (
              <Button
                type="primary"
                onClick={() => {
                  this.userOperationRef.current?.open('create');
                }}
              >
                新建用户
              </Button>
            )}
            {checkPermission('/account/user/delete/batch') && (
              <Button
                onClick={() => {
                  this.batchDelete();
                }}
              >
                批量删除
              </Button>
            )}
          </div>
        </div>
        <div className="mgr-table">
          <Table
            loading={tableLoading}
            scroll={{ x: 'max-content' }}
            rowSelection={{ type: 'checkbox', ...rowSelection }}
            columns={columns}
            dataSource={tableData}
            rowKey={record => record.userId}
            pagination={{
              showSizeChanger: true,
              total: pageTotal,
              showTotal: total => `共 ${total} 条`,
              current: pageNum,
              pageSize: pageSize,
              onChange: (pageNum, pageSize) => {
                this.jumpPage(pageNum, pageSize as number);
              },
            }}
          />
        </div>
        <ResetPassword
          visible={resetPwdVisible}
          userName={currentRecord.userName}
          submitFn={this.handleResetPwdRequest}
          closeFn={this.closeResetModal}
        />
        <Modal
          width={950}
          className="user-check-detail"
          title="用户详情"
          visible={checkDetailVisible}
          footer={null}
          onCancel={() => {
            this.setState({ checkDetailVisible: false });
          }}
        >
          <Descriptions title="基本信息" column={2}>
            <Descriptions.Item label="账号">{currentRecord.userName}</Descriptions.Item>
            <Descriptions.Item label="账号类型">
              {this.accountTypeRender(currentRecord.accountType)}
            </Descriptions.Item>
            <Descriptions.Item label="用户名">{currentRecord.nickName}</Descriptions.Item>
            <Descriptions.Item label="性别">
              {currentRecord?.sex ? '女' : currentRecord?.sex === 0 ? '男' : '--'}
            </Descriptions.Item>
            <Descriptions.Item label="企业">{currentRecord.companyName}</Descriptions.Item>
            <Descriptions.Item label="角色">
              {this.getRoleNames(currentRecord.roles)}
            </Descriptions.Item>
            <Descriptions.Item label="组织架构">{currentRecord.organizationName}</Descriptions.Item>
            <Descriptions.Item label="手机号">{currentRecord.mobile}</Descriptions.Item>
            <Descriptions.Item label="身份证号">
              {currentRecord.idCardNumber || '--'}
            </Descriptions.Item>
            <Descriptions.Item label="邮箱">{currentRecord.email || '--'}</Descriptions.Item>
            <Descriptions.Item label="坐席工号">
              {currentRecord.seatsNumber || '--'}
            </Descriptions.Item>
            <Descriptions.Item label="有效期">
              {currentRecord.userValidityDate
                ? moment(currentRecord.userValidityDate).format('YYYY-MM-DD')
                : '--'}
            </Descriptions.Item>
          </Descriptions>
          {dataPermissionTableData?.length > 0 ? (
            <>
              <h3 style={{ fontWeight: 'bold' }}>
                数据权限
                <PlusCircleOutlined
                  className="form-list-btn-icon"
                  style={{ marginLeft: 10 }}
                  hidden={dataPermissionTableVisible}
                  onClick={() => {
                    const visible = !dataPermissionTableVisible;
                    this.setState({
                      dataPermissionTableVisible: !dataPermissionTableVisible,
                      dataPermissionTableStyle: visible
                        ? { display: 'block' }
                        : { display: 'none' },
                    });
                  }}
                />
                <MinusCircleOutlined
                  className="form-list-btn-icon  btn-delete"
                  style={{ marginLeft: 10 }}
                  hidden={!dataPermissionTableVisible}
                  onClick={() => {
                    const visible = !dataPermissionTableVisible;
                    this.setState({
                      dataPermissionTableVisible: !dataPermissionTableVisible,
                      dataPermissionTableStyle: visible
                        ? { display: 'block' }
                        : { display: 'none' },
                    });
                  }}
                />
              </h3>
              <Table
                style={dataPermissionTableStyle}
                columns={datePermissionRuleColumn}
                dataSource={dataPermissionTableData}
                rowKey={record => record.ruleId}
                pagination={false}
              />
            </>
          ) : (
            ''
          )}
        </Modal>
        <UserOperation
          ref={userOperationRef}
          callback={id => {
            id ? this.fetchList() : this.jumpPage(1);
          }}
        />
        {editPhoneVisible && (
          <EditPhoneModal
            show={editPhoneVisible}
            record={currentRecord}
            sucessFn={() => {
              this.setState({
                editPhoneVisible: false,
              });
              this.fetchList();
            }}
            closeFn={() => {
              this.setState({
                editPhoneVisible: false,
              });
            }}
          />
        )}
        <Modal
          width={420}
          centered
          visible={delayUserVisible}
          title="账号续期"
          onOk={handleSubmitDelayModel}
          onCancel={handleCloseDelayModel}
          destroyOnClose
        >
          <div>
            <div>根据账号类型续期1次</div>
            <div>系统管理（自有人员）：续期3个月 </div>
            <div>其他账号（自有人员）：续期12个月 </div>
            <div>四方账号：续期1个月 </div>
            <div>其他账号：续期6个月 </div>
          </div>
          <div style={{ height: 0, width: 0, overflow: 'hidden' }}>
            <Form
              ref={delayFormRef}
              {...formLayout}
              initialValues={{
                expireTime: this.delayTimeInit(
                  currentRecord.accountType,
                  currentRecord.userValidityDate
                ),
              }}
            >
              <Form.Item
                label="调整账号有效期至"
                name="expireTime"
                tooltip={
                  <div>
                    <div>根据账号类型续期1次</div>
                    <div>系统管理（自有人员）：续期3个月 </div>
                    <div>其他账号（自有人员）：续期12个月 </div>
                    <div>四方账号：续期1个月 </div>
                    <div>其他账号：续期6个月 </div>
                  </div>
                }
                rules={[
                  {
                    required: true,
                    message: '请输入有效期',
                  },
                ]}
              >
                <DatePicker
                  disabled
                  format="YYYY-MM-DD"
                  showToday={false}
                  disabledDate={disabledDate}
                  onChange={onChangeDate}
                />
              </Form.Item>
            </Form>
          </div>
        </Modal>
      </div>
    );
  }
}
